<template>
  <PageContainer title="创建公告">
    <div class="create-notice-container">
      <!-- 公告表单 -->
      <el-form
        :model="noticeForm"
        :rules="formRules"
        ref="noticeFormRef"
        label-width="100px"
        class="notice-form"
      >
        <!-- 公告标题（必填） -->
        <el-form-item label="公告标题" prop="title">
          <el-input
            v-model="noticeForm.title"
            placeholder="请输入公告标题（1-100字符）"
            maxLength="100"
            show-word-limit
          />
        </el-form-item>

        <!-- 对象平台（可选） -->
        <el-form-item label="对象平台" prop="object">
          <el-select
            v-model="noticeForm.object"
            placeholder="请选择对象（可选）"
            style="width: 100%"
          >
            <el-option label="作家助手" value="作家助手" />
            <el-option label="管理后台" value="管理后台" />
            <el-option label="书城读者" value="书城读者" />
          </el-select>
        </el-form-item>

                <el-form-item label="公告标签" prop="tag">
          <el-select
            v-model="noticeForm.tag"
            placeholder="请选择标签（可选）"
            style="width: 100%"
          >
            <el-option label="紧急公告" value="紧急公告" />
            <el-option label="活动提醒" value="活动提醒" />
            <el-option label="重要通知" value="重要通知" />
            <el-option label="赏罚公示" value="赏罚公示" />
          </el-select>
        </el-form-item>

        <!-- 公告内容（可选） -->
        <el-form-item label="公告内容" prop="content">
          <el-input
            v-model="noticeForm.content"
            type="textarea"
            :rows="8"
            placeholder="请输入公告详细内容（可选）"
            maxLength="2000"
            show-word-limit
          />
        </el-form-item>

        <!-- 提交按钮区域 -->
        <el-form-item label=" " class="submit-section">
          <el-button type="primary" @click="handleSubmit" :loading="submitLoading">
            提交公告
          </el-button>
          <el-button type="text" @click="handleReset" style="margin-left: 16px">
            重置表单
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </PageContainer>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRouter } from 'vue-router';
import PageContainer from '@/components/PageContainer.vue';
// 导入创建公告的接口封装
import { createNotice } from '@/api/super';

const router = useRouter();
const noticeFormRef = ref(null); // 表单引用
const submitLoading = ref(false); // 提交加载状态

// 表单数据模型
const noticeForm = ref({
  title: '', // 公告标题（必填）
  tag: '', // 公告标签（可选）
  content: '', // 公告内容（可选）
  object:''
});

// 表单校验规则（与接口校验一致）
const formRules = ref({
  title: [
    { required: true, message: '请输入公告标题', trigger: 'blur' },
    { min: 1, max: 100, message: '标题长度需在1-100字符之间', trigger: 'blur' }
  ],
  tag: [
    { max: 20, message: '标签长度不可超过20字符', trigger: 'blur' }
  ],
  content: [
    { max: 2000, message: '内容长度不可超过2000字符', trigger: 'blur' }
  ]
});

// 提交表单
const handleSubmit = async () => {
  try {
    // 1. 表单校验
    await noticeFormRef.value.validate();
    // 2. 开启加载状态
    submitLoading.value = true;
    // 3. 调用创建公告接口（返回的是Axios响应对象）
    const response = await createNotice(noticeForm.value);
    // 4. 提取后端返回的业务数据（code/msg/data）
    const resData = response.data;

    // 5. 适配后端格式：判断code是否为'0000'（后端成功标识）
    if (resData.code === '0000') {
      ElMessage.success(resData.msg || '公告创建成功');
      // 6. 跳转回公告列表页
      router.push('/admin/super/notices');
    } else {
      ElMessage.error(resData.msg || '公告创建失败');
    }
  } catch (error) {
    // 处理两类错误：1.表单校验失败 2.接口业务错误（后端返回非0000） 3.网络错误
    if (error.code) {
      // 业务错误（后端返回的code非0000，被request.js拦截后抛出）
      ElMessage.error(error.msg || '提交失败');
    } else if (error.name === 'Error') {
      // 网络/其他错误
      ElMessage.error(error.message || '提交失败，请重试');
    }
    console.error('创建公告异常：', error);
  } finally {
    // 关闭加载状态
    submitLoading.value = false;
  }
};

// 重置表单
const handleReset = () => {
  noticeFormRef.value.resetFields(); // 重置表单字段
  noticeForm.value = { title: '', tag: '', content: '',object:'' }; // 清空数据
};

onMounted(() => {
  // 页面挂载时可做初始化操作（如回显编辑数据，创建页无需）
});
</script>

<style lang="scss" scoped>
.create-notice-container {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.notice-form {
  max-width: 800px; // 限制表单宽度，提升可读性
}

.submit-section {
  display: flex;
  align-items: center;
  margin-top: 20px;
}

.el-textarea {
  resize: vertical; // 仅允许垂直拉伸
}

.el-form-item {
  margin-bottom: 20px;
}
</style>